<template>
    <view class="img-cell">
        <view class="" v-if="!disabled">
            <view
                class="add-img"
                :class="upgrade ? 'add-img-border' : ''"
                v-if="imageList.length < num"
                @tap="chooseImage()">
                <uni-icons type="camera" size="80"></uni-icons>
                <text>添加图片</text>
            </view>
        </view>
        <block v-for="(image, oneimageindex) in imageList" :key="oneimageindex">
            <view class="img-item">
                <image
                    class="img"
                    :src="easyGetImgUrl(image)"
                    :data-src="easyGetImgUrl(image)"
                    @tap="previewImage"></image>
                <view @click="del(oneimageindex)">
                    <uni-icons v-if="!disabled" class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                </view>
            </view>
        </block>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
	import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import { uploadImage } from "@/service/api/file.js"
import permision from "@/utils/permission.js"
export default {
    props: {
        data: {
            // 数据
            type: String,
            default: "",
        },
        index: {
            type: Number,
            default: 0,
        },
        num: {
            type: Number,
            default: 0,
        },
        date: {
            type: String,
            default: "",
        },
        upgrade: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
	components: {
		privacyAgreement
	},
    data() {
        return {
            imageList: [],
        }
    },
    mounted() {
        if (this.data) {
            if (this.data.indexOf(",") != -1) {
                this.imageList = this.data.split(",")
            } else {
                this.imageList = this.data.split()
            }
        }
    },
    methods: {
        ed(e) {
            //选择
            this.showPicker = false
            if (e) {
                this[this.type] = e.value
                this.$emit("ed", this.index, e.value)
            }
        },
        //选择图片
		//#ifdef APP
		async chooseImage(type) {
			const result = await permision.premissionCheck("EXTERNAL_STORAGE")
			if(result == 1) {  
				// 此处处理各自业务 如：uni.chooseImage  
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: function (res) {
						that.upLoadPicFn(res)
					},
				})
			}
		},
		//#endif
		// #ifndef APP
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
		// #endif
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
            this.$emit("chooseImage", this.index, this.imageList.join(","))
        },
        //上传图片
        upLoadPicFn(files) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    this.imageList.push(e.Data.FullPath)
                    this.$emit("chooseImage", this.index, this.imageList.join(","))
                }
            })
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
    },
}
</script>

<style lang="scss">
.checkmain {
    display: flex;
    flex-wrap: wrap;

    label {
        display: flex;
        width: 50%;

        view {
            white-space: nowrap;
        }
    }
}
.add-img-border {
    border: 2rpx solid #162839 !important;
}
</style>
